<template>
  <div class="table">
    <el-table :data="tableData" style="width: 100%;" :header-cell-style="{ 
      background:'rgb(84, 92, 100)',color: '#ffffff'}">
      <!-- 可以在最前边加一些自定义 -->
        <slot name="headers"></slot>
        <el-table-column v-for="(item,index) in params" :key="index"
          :label="item.value"
        >
          <template slot-scope="scope">
            <!-- 这里是根据数据传递过来的type 进行判断，可以处理数据格式，如果处理不了，请用filters来转化数据格式 -->
            <div v-if="item.type == 'date'">{{ scope.row.times | timeFilter }}</div>
            <div v-else>{{ scope.row[item.key] }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          v-else
          :prop="item.key"
          :label="item.value"
          width="180"
        ></el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <slot name="rightBtn" :data="scope.row" ></slot>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
            <!-- 具名插槽 -->
            <!-- slot-scope="scope" -->
            <!-- scope.row取得是当前table 中的一条数据  ，可以传递给调用者，当前数据-->
            
          </template>
        </el-table-column>
    </el-table>
    <!-- 添加分页 -->
    <div class="table-page">
      <!-- 复制elementui的组件的时候，组件上有同@绑定的方法，要在methods里边定义 -->
      <!-- 赋值elementui的组件的时候， 组件上有同：监听数据的方式，要在data当中定义-->
      <!-- size-change 每页几条 -->
      <!-- current-change 当前第几页-->
      <!-- page-size 取得每页几条 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pages.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pages.size"
      layout="total,sizes, prev, pager, next"
      :total="pages.total">
    </el-pagination>
    </div>
    <!-- $set -->
    <div v-for="(item,index) in array" :key="index">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
/**
 * @tableData 是后端返回的数据为数组 Array
 * @params  是页面上要显示的字段，这个key是根据后端返回的字段，做的回显
 * @page 分页的页码和页数
 */
export default {
  props: {
    tableData: {
      type: Array,
      require: true,
      default: () => {
        return [];
      },
    },
    params: {
      type: Array,
      require: true,
      default: () => {
        return [];
      },
    },
    page: {
      type: Object,
      require: false,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      currentPage2: 1,
      pages: {
        pageSize: 5,
        total: 0,
      },
      array: [{
        name: '章三',
      }]
    };
  },
  filters: {
    timeFilter(val) {
      console.log(val,94)
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1 > 10? date.getMonth() + 1: '0' + (date.getMonth() + 1);
      let day = date.getDate() > 10?date.getDate(): '0' + date.getDate();
      // return year + '-' + month + '-' + day
      return `${year}-${month}-${day}`
    }
  },
  watch: {
    page: {
      handler(val) {
        console.log(val,93)
        // 深拷贝
        this.pages = Object.assign({},val);
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    console.log(this.page,88)


    // this.array[0].name = 'lisi'
    // 就是可以更新对象当中的某一个值，或者新增对象当中某一个值。
    // 为什么要用$set,因为vue2当中不支持数组响应式。所以 this.$set 是可以改变某个值的
    // 也可以通过push ，pop，shift，unshift，reserve，split，splice
    // $set 是改变数组中的某一个对象的值，更新数据 
    this.$set(this.array[0],'name', 'list')
    // this.pages = this.page
  },
  methods: {
    del(row) {
      // this.$parent.dels()
      this.$emit("dels", row)
    },
    handleSizeChange(val) {
      console.log(val,80)
      this.pages.size = val;
      this.$emit("pageChange",this.pages)
    },
    handleCurrentChange(val) {
      console.log(val,115)
      this.pages.pageSize = val;
      this.currentPage2 = val;
      console.log(this.pages,118)
      // $set是更新对象，或者数组 this.$set(对象，具体的某个属性，值) * 
      this.$emit("pageChange",this.pages)
    }
  }
};
</script>
<style lang="scss">
.el-table__body-wrapper{
  height: 300px !important;
  overflow-y: scroll;
}
.el-table__body {
  height: 300px !important;
  overflow-y: scroll;
}
.table-page {
  margin-top: 30px;
  text-align: right;
}
</style>
